<template>
  <Transition
    enter-active-class="transition-all duration-300 ease-out"
    enter-from-class="opacity-0 scale-95"
    enter-to-class="opacity-100 scale-100"
    leave-active-class="transition-all duration-200 ease-in"
    leave-from-class="opacity-100 scale-100"
    leave-to-class="opacity-0 scale-95"
  >
    <div
      v-if="show"
      class="fixed inset-0 z-50 bg-black bg-opacity-50 flex items-center justify-center p-4"
      @click="hide"
    >
      <div
        class="bg-white rounded-lg shadow-xl max-w-md w-full p-6"
        @click.stop
      >
        <div class="text-center">
          <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
              <path d="M7 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM7 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 8a2 2 0 1 0 0 4 2 2 0 0 0 0-4zM13 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
            </svg>
          </div>
          
          <h3 class="text-lg font-semibold text-gray-900 mb-2">拖拽功能使用指南</h3>
          <p class="text-gray-600 mb-6">您可以通过拖拽来重新排列简历模块的顺序</p>
          
          <div class="space-y-4 text-left">
            <div class="flex items-start gap-3">
              <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span class="text-xs font-medium text-blue-600">1</span>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-900">悬停显示拖拽手柄</p>
                <p class="text-sm text-gray-600">将鼠标悬停在模块上，会显示拖拽手柄图标</p>
              </div>
            </div>
            
            <div class="flex items-start gap-3">
              <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span class="text-xs font-medium text-blue-600">2</span>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-900">拖拽移动模块</p>
                <p class="text-sm text-gray-600">点击并拖拽手柄，将模块移动到其他位置</p>
              </div>
            </div>
            
            <div class="flex items-start gap-3">
              <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span class="text-xs font-medium text-blue-600">3</span>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-900">查看放置指示器</p>
                <p class="text-sm text-gray-600">拖拽时会显示蓝色指示器，提示放置位置</p>
              </div>
            </div>
            
            <div class="flex items-start gap-3">
              <div class="w-6 h-6 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                <span class="text-xs font-medium text-blue-600">4</span>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-900">释放完成移动</p>
                <p class="text-sm text-gray-600">在目标位置释放鼠标，完成模块移动</p>
              </div>
            </div>
          </div>
          
          <div class="mt-6 flex gap-3">
            <button
              @click="hide"
              class="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
            >
              开始使用
            </button>
            <button
              @click="hideAndDontShow"
              class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"
            >
              不再显示
            </button>
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
interface Props {
  show: boolean
}

defineProps<Props>()

const emit = defineEmits<{
  hide: []
  'dont-show-again': []
}>()

const hide = () => {
  emit('hide')
}

const hideAndDontShow = () => {
  emit('dont-show-again')
}
</script>
